<template>
	<div class="group-set"> 
        <div class="list">
            <div class="switch-title">
                <span >开启分组</span>
                <el-switch
                v-model="$store.state.groupSwitch"
                on-text=""
                off-text=""
                @change="switchChange">
                </el-switch>
            </div>
            <div v-show="$store.state.groupSwitch">
                <div 
                    class="content" 
                    v-for="(item,index) in $store.state.groupList" 
                    v-dragging="{ item: item, list: $store.state.groupList, group: 'item' }">
                    <div class="form-item-box clearfix">
                        <div class="form-item-left text-center">分组名称:</div>
                        <div class="form-item-right"> 
                            <el-input v-model="item.title" placeholder="请输入内容"></el-input> 
                        </div>
                        <i class="el-icon-close delete-icon cursor" @click="clearList(index)"></i>
                    </div>
                </div>
                <div class="text-right add-btn">
                    <el-button  @click="addList">+添加分组</el-button>
                </div>
                <div class="text-center">
                    <el-button type="primary" @click="subList">保 存</el-button>
                </div>
            </div>
            

        </div>
    </div>
</template>
<script>
	import { baseImgPath } from './../../../config/env'
	import * as api from './../../../api/api';
	import Vue from 'vue'
	import { Message,Loading} from 'element-ui';    
	export default {
        props:{

        },
		data(){
			return {
                // switchShow:false, 
            }
		},
		watch:{
			
		},
		mounted(){
            this.$dragging.$on('dragged', ({ value }) => {
				// console.log(value.item)
				// console.log(this.pickedPrizeList);
				// console.log(value.list)
			});
		},  
        methods: {
            addList(){
                this.$store.state.groupList.push( {title:''} )
            },
            clearList(index){
                Vue.delete(this.$store.state.groupList, index);
            },
            //开启分组
            switchChange(val){  
                let vm =this;
                if(!val&&this.$store.state.groupList.length!=0){
                    this.$store.state.groupSwitch=true; 
                    Message.error({message: '分组未删除，不可关闭'})
                }else if(!val&&this.$store.state.groupList.length==0){
                    this.subList();
                }
            },
            //保存分组列表
            subList(){
                let vm = this;
                if(vm.regList()){
                    api.voteGroup({data:JSON.stringify(vm.$store.state.groupList),activity_id:vm.$store.state.groupActId}).then(res=>{
                        if(res.data.code==0){
                            vm.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            vm.$store.state.groupData=res.data.data;  
                            vm.$store.state.groupActId=res.data.activity_id
                            let arrList=[];
                            res.data.data.forEach((item,index)=>{
                                let obj={};
                                obj.title=item.title;
                                obj.type=item.type;
                                obj.group_id=item.group_id; 
                                arrList.push(obj);
                            }); 
                            vm.$store.state.groupList=arrList; 
                            // console.log(vm.$store.state.groupList);
                            //  console.log(vm.$store.state.groupData);
                        } 
                    }) 
                }
            },
            regList(){
                let vm = this;
                let flag;
                if(vm.$store.state.groupList.length!=0){
                    vm.$store.state.groupList.forEach((item,index)=>{
                        if(item.title==''){
                            Message.error({message: '请将分组信息填写完整或删除不需要的分组'})
                            return flag=false;
                        }else{
							flag=true;
						}
                    });
                }else{
                    flag=true;
                }
                return flag;
            },
        }
	}
</script>
<style>
	/* 修改输入框样式 */
	.pick-date-box .el-input__inner{
		height: 34px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 100%;
        height: 34px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-input__inner{
		height: 32px;
		box-sizing: border-box;
		border-radius: 0;
		background-color: #f4f8fb;
	    color: #888;
	    border: 1px solid #efefef;
	    box-shadow: none;
	    font-size: 12px;
	    width: 109px;
        padding: 6px 12px;
        box-sizing: border-box;
	}
	.special-item .el-date-editor i{
		display: none;
	}
	.special-item .el-select .el-input__inner{
		padding-right: 25px;
		width:130px;
	}
	.lotteryNum-box .el-input__inner{
		width:142px;
		box-sizing: border-box;
		border-radius: 0;
		height: 34px;
		font-size: 12px;
	    color: rgb(136, 136, 136);
	    border-color: rgb(239, 239, 239);
	    background-color: rgb(238, 238, 238);
	}
	.tag-box .el-input__inner{
		width:160px;
	}
	.tag-box .el-input{
	}
	.rule-box .ql-container{
		height: 300px;
		background: #f4f8fb;
	}
	.share-switch .el-switch{
		position: relative;
		top:-1px;
	}
	.rule-title .el-switch{
		top:-1px;
		left: 10px;
	}
	.el-switch__label span{
		color:rgba(0,0,0,0);
	}
</style>
<style lang="less" scoped>
	@import '../../../style/setTemplate'; 
    .group-set{
        min-height:200px;
        width:100%;
        padding:10px; 
        .list{
            border:1px solid #ddd;
            padding:20px;
            .switch-title{
                margin-bottom:10px;
                span{
                    margin-right:20px;
                }
            }
            .content{
                margin:10px 2%;
                border:1px solid #ddd;
                padding:20px 0 5px;
                position:relative;
                .form-item-right{
                    width:70%;
                }
                .delete-icon{
                    position:absolute;
                    top:10px;
                    right:10px; 
                }
            }
            .add-btn{
                padding-right:15px;
                padding-top:10px;
            }
        }
    }
    
</style>